var TIME = 0;
var TYPE = 1;
var PATH = 2;
var arraySlide;
var currentSlide = -10;

function showSlide(idVideo) {
	var video = document.getElementById("video");

	// ajax get all slides  ...
	var resultString = "";
	$.ajax({
		url : "getSlides.php",
		data : {
			id : idVideo
		},
		async : false,
		dataType : "text"
	}).done(function(res) {
		resultString = "" + res;
	});
	// Split in an array all the slides parameters.
	arraySlides = parseResult(resultString);

	//Bind the displaying fonction to the video
	$("#video").bind("timeupdate", displaySlide);
}

function displaySlide() {

	var i = 0;
	var length = arraySlides.length - 1;
	var video = document.getElementById("video");
	var videoTime = parseInt(video.currentTime);

	//finds the slide after the one to show
	while (i < length && videoTime > arraySlides[i][TIME]) {
		i++;
	}

	i--;
	//If the slide changed
	if (i != currentSlide) {
		currentSlide = i;
		var currentSlidePath;
		var currentSlideType;
		var currentSlideTime;
		//If no slide matches
		if (i == -1) {

			currentSlidePath = "slides/default_slide.jpg";
			currentSlideType = "I";
		} else {

			//get the path and type of the slide to show
			currentSlidePath = arraySlides[i][PATH];
			currentSlideType = arraySlides[i][TYPE];
			currentSlideTime = arraySlides[i][TIME];
		}

		var video = document.getElementById("video");
		var tmpSlideVar = document.getElementById("currentSlide");

		//If the img has never been defined, put the default value
		var width = (tmpSlideVar == null) ? video.width : tmpSlideVar.width;
		var height = (tmpSlideVar == null) ? video.height : tmpSlideVar.height;
		var divContent = "";
		var slide = $("#slides");
		switch(currentSlideType) {
			//if the slide is an image
			case "I":
				divContent = '<img id="currentSlide" src="' + currentSlidePath + '" width="' + width + '" height="' + height + '" onclick="playPause()">';
				//put the content in the "slides" div tag
				slide.html(divContent);
				break;
			//if the slide is a video
			case "V":
				//add custom data-start for time handling of the video slide
				divContent = '<video id="currentSlide" data-start=' + currentSlideTime + ' width="' + width + '" height="' + height + '" muted preload="auto" onclick="playPause()" ';
				//if the video is playing, start the video slide immediatly
				if (!video.paused) {
					divContent += 'autoplay'
				}
				divContent += '>';

				//TODO find a way to get the right paths and extensions
				divContent += '<source src=' + currentSlidePath + ' type="video/ogg">';
				divContent += '<source src=' + currentSlidePath + ' type="video/mp4">';
				divContent += '<source src=' + currentSlidePath + ' type="video/webm">';
				divContent += "</video>"

				//put the content in the "slides" div tag
				slide.html(divContent);
				//At the end of the video a black slide is displayed until the next slide
				$("#currentSlide").bind('ended', function() {
					var tmpSlideVar = document.getElementById("currentSlide");
					//If the img has never been defined, put the default value
					var width = tmpSlideVar.width;
					var height = tmpSlideVar.height;
					divContent = '<img id="currentSlide" src="slides/black.jpg" width="' + width + '" height="' + height + '" onclick="playPause()">';
					slide.html(divContent);
				});
				break;
		}

	}
}

function parseResult(resultString) {
	var arrayResult = Array();
	//seperate the different slides
	var slides = resultString.split("|");
	var slide;

	for (var i = 0; i < slides.length; i++) {
		//Seperate the parameters of the slides.
		slide = slides[i].split(",");
		arrayResult[i] = slide;
	}
	return arrayResult;
}

function moveVideoTo(time) {
	document.getElementById("video").currentTime = time +1;
}
